<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.timer{
	display: inline-block;
	height: 70px;
	font-size: 25px;
	vertical-align: middle;
}
.box{
	display: inline-block;
	border-radius:30px ;
	border: 3px solid #BBBBBB;
	width:170px;
}
.ball{
	display: inline-block;
	background: #B4BCCC;
	width: 40px;
	height: 40px;
	border-radius:20px;
	margin-top: 5px;
	margin-left: 10px;
}
.green{
background: greenyellow;
}
.red{
background: red;
}
.yellow{
background: yellow;
}
	
</style>

</head>
<body>
<div class="box">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball" id="light"></div>
</div>
<div class="timer">12</div>
<button onclick="stop()">停止跳动</button>
<script>
//.=id #=class 啥都没有=type
var timer=document.querySelector('.timer');
var light=document.querySelector('#light');

var colors=['green','yellow','red','yellow'];
light.classList.add('green');


function stop(){
	clearInterval(id);//停止时间
}

var id=setInterval(timing,200);//timing=? 是代表秒速/针的快慢 控制时间的长短
var i=12;
var j=0;
function timing(){
	if(i==0){
		//
		j=++j%4;
		init();
		light.classList.add(colors[j]);
		i=j%2 ? 6:13;
		
		// if(j%2){
		// 	i=6;
		// }else{
		// 	i=13//多一秒
		// }
		// // i=13//多一秒
	}
	i--;
	timer.innerHTML=i;
	
}

function init(){
	for(let color of colors){
		light.classList.remove(color);//先删除前面的颜色再加入颜色
	}
}

</script>
</body>
</html>
